<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link th:href="@{/css/index.css}" rel="stylesheet"/>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
<th:block th:insert="~{header :: head}"/>

<!-- Banner 区域 -->
<section class="hero">
    <div class="hero-content">
        <h2>轻松订票，畅享音乐盛宴</h2>
        <p>在这里，您可以快速找到并预订各类热门演唱会门票！</p><br>
        <a class="btn" href="viewConcert">立即订票</a>
    </div>
</section>

<!-- 热门演唱会列表 -->
<section id="concerts" class="concert-list">
    <h2>热门演唱会</h2>

    <div class="grid-container">
        <div th:each="concert : ${ConcertL}">
<!--            <a th:href="@{'/dp/' + ${concert.concertid}}" style="display: flex; text-decoration: none; color: inherit;">-->
            <a href="dp" th:href="@{'dp?id=' + ${concert.concertid}}" style="display: flex; text-decoration: none; color: inherit;">
                <div class="concert-card">
                    <img th:src="@{${concert.concertImg}}" alt="明星演唱会" class="concert-image">
                    <div class="card-content">
                        <h3 th:text="${concert.concertname}"></h3>
                        <p><strong>日期：</strong><span th:text="${#dates.format(concert.concertdate, 'yyyy-MM-dd')}"></span></p>
                        <p><strong>地点：</strong><span th:text="${concert.venue}"></span></p>
                    </div>
                </div>
            </a>
        </div>
    </div>
</section>

<!-- Footer 区域 -->
<th:block th:insert="~{footer :: foot}"/>

<!--<script src="script.js"></script>-->
</body>
</html>
